import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, ImageBackground, Image, FlatList, StatusBar, TextInput, ScrollView, Picker} from 'react-native';
import { base } from "../../../../assets/style";
import LinearGradient from "react-native-linear-gradient";
import ReactNativePickerSelect from 'react-native-picker-select'

type Props = {};
export default class DailyIncome extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: '每天总收益',
            headerStyle: {
            },
            headerTintColor: '#0f0f0f',
            headerBackTitle: null
        }
    }
    constructor() {
        super();
        this.state = {
            bind: true
        }
    }
    render() {
        return (
            <View style={[base.flex_1, base.bg_white, base.content_container, { marginTop: 20 }]}>
                <View style={[base.bg_gray, base.flex_col_between, { position: 'relative', height: 160, borderRadius: 5, marginBottom: 20 }]}>
                    <Image style={[{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: '100%',
                        borderRadius: 5
                    }]} source={require('@images/mine/bg_miner.jpeg')}/>
                    <View style={[base.flex_row_between, base.content_container, { width: '100%', paddingVertical: 15 }]}>
                        <View><Text style={[ base.color_white, { fontSize: 16 } ]}>总矿机数量： 10</Text></View>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('AddMiner')} style={[base.bg_white, base.flex_row_center, { borderRadius: 3, paddingVertical: 4, paddingHorizontal: 5 }]}>
                            <Text style={[base.color_orange, { fontSize: 12 }]}>添加矿机</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={[base.content_container, {width: '100%'}]}>
                        <View style={[base.flex_row_start]}><Text style={[base.color_white, { fontSize: 16 }]}>总收入</Text></View>
                        <View style={[base.flex_row_start, { paddingTop: 5 }]}><Text style={[base.color_white, { fontSize: 28 }]}>1,5000 FCC</Text></View>
                    </View>
                    <View style={[base.flex_row_end, base.content_container, { paddingBottom: 5, width: '100%' }]}>
                        <Text style={[base.color_white, { fontSize: 13 }]}>最后更新: 2018-10-31 12:00</Text>
                    </View>
                </View>
                <View style={[base.flex_1]}>
                    <View style={[base.flex_row_between, { paddingVertical: 15, marginTop: 10, borderColor: '#eee', borderBottomWidth: 1, borderTopWidth: 1 }]}>
                        <View style={[base.flex_1, base.flex_row_center]}><Text style={[ base.color_gray, { fontSize: 14 } ]}>时间</Text></View>
                        <View style={[base.flex_1, base.flex_row_center]}><Text style={[ base.color_gray, { fontSize: 14 } ]}>FCC挖矿</Text></View>
                    </View>
                    <FlatList
                        data={[
                            {
                                key: 'a',
                                id: '321321321',
                                income: '100 FCC',
                                state: '挖矿中'
                            },
                            {
                                key: 'b',
                                id: '321321321',
                                income: '100 FCC',
                                state: '挖矿中'
                            },
                            {
                                key: 'c',
                                id: '321321321',
                                income: '100 FCC',
                                state: '挖矿中'
                            },
                            {
                                key: 'd',
                                id: '321321321',
                                income: '100 FCC',
                                state: '挖矿中'
                            },
                            {
                                key: 'e',
                                id: '321321321',
                                income: '100 FCC',
                                state: '挖矿中'
                            },
                            {
                                key: 'f',
                                id: '321321321',
                                income: '100 FCC',
                                state: '挖矿中'
                            },
                            {
                                key: 'g',
                                id: '321321321',
                                income: '100 FCC',
                                state: '挖矿中'
                            },
                        ]}
                        renderItem={
                            ({item}) => {
                                return (
                                    <View style={[base.flex_row_between, { paddingVertical: 15, borderBottomWidth: 1, borderBottomColor: '#eee' }]}>
                                        <View style={[base.flex_1, base.flex_row_center ]}><Text style={[base.color_gray]}>{item.id}</Text></View>
                                        <View style={[base.flex_1, base.flex_row_center ]}><Text style={[base.color_gray]}>{item.income}</Text></View>
                                    </View>
                                )
                            }
                        }/>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
